<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>彩票兑积分</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/1px.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        background-color: #fff;
      }
      /*头像*/
      
      .flex {
        display: flex;
      }
      
      .user-info {
        padding: 3px 0;
      }
      
      .header {
        flex: 3;
        text-align: center;
      }
      
      .header img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
      }
      
      .info {
        flex: 5;
        font-size: 14px;
        line-height: 24px;
      }
      
      .change-btn {
        flex: 2;
      }
      
      .change-btn button {
        vertical-align: middle;
        margin-top: 18px;
      }
      /**/
      
      .exchange {
        padding: 0 2%;
        margin: 5px 0;
      }
      
      .text {
        font-size: 13px;
        text-align: center;
      }
      
      .line {
        margin-top: 10px;
      }
      /**/
      
      .goods-each {
        padding: 5px 5px;
        position: relative;
      }
      
      .goods-each:after {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .img-box {
        flex: 2;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
        text-align: center;
      }
      
      .goods-info-box {
        flex: 4;
        font-size: 14px;
        line-height: 24px;
      }
      
      .goods-info-box div {
        margin-left: 5px;
      }
      
      .goods-op-box {
        flex: 3;
        position: relative;
        height: 100%;
      }
      
      .recovery-num {
        position: absolute;
        right: 20px;
        font-size: 13px;
      }
      
      .choose-btn {
        width: 70%;
        position: absolute;
        bottom: -70px;
        right: 5px;
        text-align: center;
      }
      /*底部*/
      
      .total-info {
        height: 39px;
        line-height: 39px;
        background-color: #fff;
        position: absolute;
        bottom: 39px;
        width: 100%;
        font-size: 14px
      }
      
      .total-info span {
        margin-left: 10px;
      }
      
      footer {
        height: 38px;
        line-height: 38px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 15px
      }
      
      footer:before {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 38px;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .flex-item {
        flex: 1;
      }
      
      .submit-next-btn {
        background-color: #5677FC;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <script src="../config.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <div id="app" class="mui-content">
      <!---->
      <div class="user-info flex vux-1px-b">
        <div class="header">
          <img src="" alt="" />
        </div>
        <div class="info">
          <div v-text="userInfo.userName?userInfo.userName:''"></div>
          <div>ID：<span v-text="userInfo.userId"></span></div>
          <div>当前积分：<span v-text="userInfo.point"></span></div>
        </div>
        <div class="change-btn">
          <button type="button" class="mui-btn mui-btn-primary modify-btn mui-action-back">修改</button>
        </div>
      </div>
      <!---->
      <div class="exchange mui-row">
        <div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
        <div class="text mui-col-sm-4 mui-col-xs-4">兑换积分</div>
        <div class="line mui-col-sm-4 mui-col-xs-4 vux-1px-b"></div>
      </div>
      <!---->
      <div class="goods-each">
        <div class="flex">
          <div class="img-box">
            <img src="<%=imgPath+list[i].cutImg%>" alt="" />
          </div>
          <div class="goods-info-box">
            <div class="goods-name">
              彩票
            </div>
            <div class="goods-id">
              比例：1:1
            </div>
            <div class="goods-num">
              回收数量:{{recycle.recyclingAmount}}
            </div>
          </div>
          <div class="goods-op-box">
            <span class="recovery-num"></span>
            <button type="button" class="edit-choose-btn mui-btn mui-btn-primary choose-btn" @click='change'>调整</button>
          </div>
        </div>
      </div>
      <!--底部-->
      <div class="total-info vux-1px-t">
        <span>积分：+{{recycle.recyclingAmount}}</span>
      </div>
      <footer class="flex withdraw-btn-box">
        <div class="flex-item mui-action-back">
          上一步
        </div>
        <div class="flex-item submit-next-btn" @click="exchange">
          提交
        </div>
      </footer>
      <!---->
    </div>
    <script type="text/javascript">
      (function($, doc) {
        $.init()
        var vm = new Vue({
          el: '#app',
          data: function() {
            return {
              currentShopObj: {},
              userInfo: {},
              params: {},
              recycle: {
                storeId: '',
                openId: '',
                memberId: '',
                memberName: '',
                memberPhoto: '',
                recyclingAmount: 0,
                recyclingTime: '',
                memberScore:0
              }
            }
          },
          mounted: function() {
            var _this = this
            $.plusReady(function() {
              _this.receiveParams()
            })
          },
          methods: {
            receiveParams: function() {
              var self = plus.webview.currentWebview()
              this.currentShopObj = self.currentShopObj
              this.userInfo = self.userInfo
              this.params.shopId = self.currentShopObj.storeId
              this.recycle.storeId = self.currentShopObj.storeId
              this.recycle.memberId = self.userInfo.userId
              this.recycle.openId = self.userInfo.openId
              this.recycle.memberName = self.userInfo.userName
            },
            change: function() {
              var sf = this
              var btn = ['取消', '确定']
              mui.prompt('请输入回收数量', sf.recycle.recyclingAmount * 1, '调整', btn, function(e) {
                if(e.index == 1) {
                  if(e.value) {
                    sf.recycle.recyclingAmount = e.value * 1
                    sf.recycle.memberScore = sf.recycle.recyclingAmount + sf.userInfo.point*1
                  } else {
                    mui.toast('请填写回收数量！')
                  }
                }
              }, 'div')
              document.querySelector('.mui-popup-input input').type='number'
            },
            exchange: function() {
              var sf = this
              this.recycle.recyclingTime = new Date().getTime()
              config.ajax({
                url: '/recyclingLog/addTicketRedemption',
                data: this.recycle,
                success: function(res) {
                  if(res.result === 1) {
                    mui.toast('兑换成功！')
                    var title = '回收'
                    mui.openWindow({
                      url: './userInfo.html',
                      id: 'userInfo',
                      styles: {
                        top: 0, //新页面顶部位置
                        bottom: 0, //新页面底部位置         
                        titleNView: {
                          titleText: title,
                          titleColor: "#FFFFFF",
                          titleSize: "17px",
                          backgroundColor: "#FF6800",
                          autoBackButton: true,
                          //                homeButton: true,
                          buttons: [{
                            float: "right",
                            fontSize: "18px",
                            fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                            text: "\ue602",
                            onclick: function() {
                              var allPage = plus.webview.all()
                              var nowPage = plus.webview.getWebviewById('index')
                              for(var i = 0; i < allPage.length; i++) {
                                if(allPage[i].getURL() !== nowPage.getURL()) {
                                  plus.webview.close(allPage[i]);
                                }
                              }
                            }
                          }],
                          splitLine: {
                            color: "#CCCCCC",
                            height: "1px"
                          }
                        }
                      },
                      extras: {
                        currentShopObj: sf.currentShopObj,
                        member: sf.userInfo,
                        score: sf.recycle.memberScore
                      }
                    })
                  } else {
                    mui.toast(res.errormsg)
                  }
                }
              })
            }
          }
        })
      })(mui, document)
    </script>
  </body>

</html>